<!--
 * @Author: licongwei
 * @Date: 2022-03-14 18:03:16
 * @Description: 数据报送排名
-->
<template>
  <!-- <com-box :title="chartState.title"> -->
  <!-- 将排名字样替换掉 -->
  <com-box :title="chartState.title.replace('排名', '')">
    <template v-slot>
      <div class="box">
        <div class="chart" id="id_M1RightBottom">
          <charts :params="chartState.params"></charts>
        </div>
        <div class="btns">
          <ul class="list">
            <li
              v-for="(item, index) of btnsState.data"
              :key="index"
              :class="['item', { active: btnsState.id === item.id }]"
              @click="btnsState.handleClick(item.id)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </template>
  </com-box>
</template>
<script lang="ts">
import { defineComponent, reactive, computed, ref } from 'vue'
import { useStore } from 'vuex'
import * as echarts from 'echarts'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
interface IDataItem {
  name: string
  value: number
}
interface IChartState {
  title: string
  params: any
  getData: (typeId: string) => void
}
interface IBtnsState {
  id: string
  data: any[]
  handleClick: (id: string) => void
}
export default defineComponent({
  name: 'yjjczxqk',
  components: {
    comBox
  },
  setup() {
    // 柱图
    const chartState: IChartState = reactive({
      title: '',
      params: {
        custom: true,
        loading: true,
        height: '410px',
        forceRedraw: true, // 强制重绘
        map: {
          value: '数量'
        },
        options: {
          dataset: {
            dimensions: ['name', 'value'],
            source: []
          },
          legend: {
            show: false
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              snap: true
            },
            confine: true,
            backgroundColor: '#1959a7',
            borderColor: '#4beeff',
            borderWidth: 1,
            padding: 12,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            formatter: (params: any) => {
              const { data, marker } = params[0]
              return `<div style="font-weight: bold;">${data.name}
                <div style="display: flex;align-items: center;justify-content: space-between;font-weight: bold;"><span>${marker}<span style="margin-left:5px">数量</span></span><span style="margin-left:15px;">${data.value}</span></div>
                </div>`
            }
          },
          grid: {
            top: 0,
            bottom: 0,
            left: '110px',
            right: 0
          },
          xAxis: [
            {
              type: 'value',
              show: false
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                fontSize: '16px',
                color: '#9ccfff',
                formatter: function (value: any) {
                  if (value.length === 4) {
                    return value
                  } else {
                    return '    ' + value
                  }
                }
              }
            }
          ],
          series: [
            {
              type: 'bar',
              backgroundStyle: {
                color: 'rgba(68,156,255,0.1)'
              },
              itemStyle: {
                // color: '#20C3E3'
                // color: [[['#20C3E3', '#0d66ff'], 'right']]
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: '#20C3E3'
                  },
                  {
                    offset: 1,
                    color: '#0d66ff'
                  }
                ])
              },
              barWidth: 15,
              zlevel: 1,
              data: []
            },
            {
              type: 'bar',
              barGap: '-100%',
              backgroundStyle: {
                color: 'rgba(68,156,255,0.1)'
              },
              label: {
                show: true,
                position: ['105%', 0],
                align: 'left',
                color: '#00baff',
                fontFamily: 'AliHYAiHei',
                fontSize: '17px',
                formatter: (parmas: any) => {
                  return parmas.data.sourceValue
                }
              },
              itemStyle: {
                color: 'rgba(68,156,255,0.1)'
                // color: '#f0f'
              },
              barWidth: 15,
              data: []
            }
          ]
        }
      },
      getData: (typeId: any) => {
        chartState.params.loading = true
        httpRequest
          .get({ url: 'M1Sjbspm', params: { typeId: typeId } })
          .then((res: any) => {
            chartState.title = res.title
            const dataSort = res.data.sort((a: any, b: any) => {
              return a.value - b.value
            })
            const maxValue = dataSort[dataSort.length - 1].value
            chartState.params.options.series[0].data = dataSort
            chartState.params.options.series[1].data = dataSort.map(
              (item: any) => ({
                ...item,
                sourceValue: item.value,
                value: maxValue
              })
            )
            chartState.params.options.yAxis[0].data = dataSort.map(
              (item: any) => item.name
            )

            const echartWidth =
              String(dataSort[dataSort.length - 1].value).length * 8.6
            chartState.params.options.grid.right = 30 + echartWidth
            chartState.params.loading = false
          })
          .catch(() => {
            console.log('请求失败')
          })
      }
    })

    // 切换按钮
    const btnsState: IBtnsState = reactive({
      id: 'sjbsl',
      data: [
        {
          name: '数据报送量',
          id: 'sjbsl'
        },
        {
          name: '信息报送量',
          id: 'xxbsl'
        }
      ],
      handleClick: (id: string) => {
        if (id === btnsState.id) return
        btnsState.id = id
        chartState.getData(btnsState.id)
      }
    })
    chartState.getData(btnsState.id)
    const refreshData = () => {
      chartState.getData(btnsState.id)
    }
    return {
      chartState,
      btnsState,
      refreshData
    }
  }
})
</script>
<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .btns {
    flex: 1;
    ul.list {
      display: flex;
      align-items: center;
      justify-content: center;
      li.item {
        font-size: 14px;
        color: #dcdcdc;
        background-color: #00479d;
        border-radius: 4px;
        line-height: 30px;
        padding: 0 30px;
        cursor: pointer;
        transition: all 0.2s;
        &:nth-child(1) {
          position: relative;
          left: 4px;
        }
        &.active {
          position: relative;
          z-index: 1;
          color: #fff;
          background-color: #2a8aff;
        }
      }
    }
  }
}
</style>
